<script setup>
import { ref } from 'vue'
const list = ref([
  { id: 1, name: '吃饭' },
  { id: 2, name: '睡觉' },
  { id: 3, name: '写代码' },
])
// 定义响应式变量
const addValue = ref('')
// 添加选项
const addItem = () => {
  if (addValue.value) {
    // => ...[1,2,3]
    let allIds = list.value.map((item) => item.id) // [1，2，3]  []
    let id = 0
    // 当数组有值的时候 - 取最大值 + 1
    if (allIds.length) {
      id = Math.max(...allIds) + 1
    } else {
      // 默认就是1
      id = 1
    }
    list.value.push({ name: addValue.value, id })
    addValue.value = ''
  }
}

// 删除方法
const delItem = (id) => {
  if (confirm('确定要删除吗')) {
    // 先找索引 通过索引删除
    // let index = list.value.findIndex(item => item.id === id)
    // 排除法
    // list.value.splice(index, 1)
    list.value = list.value.filter((item) => item.id !== id)
  } // alert confirm 阻塞型代码
}
</script>

<template>
  <div>
    <div>
      <input type="text" v-model="addValue" @keyup.enter="addItem" />
      <button @click="addItem">添加</button>
    </div>

    <table border="">
      <thead>
        <th>标识</th>
        <th>待办事项</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <a @click.prevent="delItem(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
